<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3D魔方</title>
        <style>
            /* 通用选择器：规范页面结构---盒模型：内外边距 */
            *{
                margin:0;
                padding:0;
            }
            /* 1.容器：视觉效果差，特点：①宽高  ②居中 ③视觉属性*/
            .container{
                width:300px;
                height:300px;
                /* 边框：确定选择器是否选中 */
                bor der: 5px solid red;
                /* 居中 */
                margin:150px  auto;
                /* 视觉属性：数值px   拉开距离 */
                perspective:900px;
                
            }
            /* 2.魔方整体：3D主体部分，特点：①宽高  ②3D效果层：X轴 Y轴 Z轴 ③查看3D效果层 ④动画*/
            .box{
                width:300px;
                height:300px;
                bo rder:1px solid red;
                /* 3D效果层：X、Y、Z坐标轴 */
                transform-style: preserve-3d;
                /* 查看3D效果层转换：旋转 X 45deg Y 45deg*/
                transform:rotateX(45deg) rotateY(45deg);
                animation: mofang 10s linear infinite;
            }
            
            @keyframes mofang{
                0%{
                    transform:rotateX(45deg) rotateY(45deg);
                }
                70%{
                    transform:rotateX(180deg) rotateY(180deg);
                }
                100%{
                    transform:rotateX(360deg) rotateY(360deg);
                }
            }
            /* 3.六个面，公共面：①宽高一致，②绝对定位 */
            .page{
                width:300px;
                height:300px;
                /* 绝对定位：定一个基准点，xyz轴调整 */
                position: absolute;
            }
            /* 3.1六个面的颜色 */
            .page_top{
                background-color: #e4393c;
                /* Z轴 上面平移 150px*/
                transform:translateZ(150px);
				background-image: url(./img/1.jpg);
            }
            .page_bottom{
                background-color: aqua;
                transform:translateZ(-150px);
				background-image: url(./img/2.jpg);
            }
            .page_left{
                background-color: #ffff00;
                transform:translateX(-150px) rotateY(90deg);
				background-image: url(./img/3.jpg);
            
            }
            .page_right{
                background-color: #ff00ff;
                transform: translateX(150px) rotateY(90deg);
				background-image: url(./img/4.jpg);
            }
            .page_before{
                background-color: #00ff7f;
                transform: translateY(150px) rotateX(90deg);
				background-image: url(./img/5.jpg);
            }
            .page_after{
                background-color: #aa5500;
                transform: translateY(-150px) rotateX(90deg);
				background-image: url(./img/6.jpg);
            }
        </style>
    </head>
    <body>
        <!-- 魔方：8个div组成
                  外层div：视觉差，居中
                  魔方整体div:六个面包起来-->
        <div class="container">
            <div class="box">
                <!-- 六个面：公共属性：宽高一致 
                                 颜色不一致
                                 --->
                <div class="page page_top" ></div>                
                <div class="page page_bottom" ></div>
                <div class="page page_left"></div>
                <div class="page page_right"></div>
                <div class="page page_before"></div>
                <div class="page page_after"></div>
            </div>
        </div>
        <audio src="./img/renxi.mp3" autoplay></audio>
    </body>
</html>